<template>
  <div class="map_box">
    <baidu-map :style="{ width: mapSize.width, height: mapSize.height}" ak="sCX9lbxKE6GKyT2PZvdGbkkSrqK0rGuv" :zoom="15" :scroll-wheel-zoom="true"
               :center="center"
               @moving="syncCenterAndZoom"
               @moveend="syncCenterAndZoom"
               @zoomend="syncCenterAndZoom">
      <bm-marker :position="{lng: center.lng, lat: center.lat}" :icon="{url:dot,size: {width:32,height:32}}" >
      </bm-marker>
      <!--<bm-control :offset="{width: '10px', height: '10px'}">-->
        <!--&lt;!&ndash;<el-input v-model="input" placeholder="请输入内容"></el-input> &lt;!&ndash; 这里指代一个自定义搜索框组件 &ndash;&gt;&ndash;&gt;-->
      <!--</bm-control>-->
    </baidu-map>
  </div>
</template>

<script>
  import { BaiduMap,BmMarker } from 'vue-baidu-map'
  import { BmControl } from 'vue-baidu-map/components/controls/Control'
  import mapDot from '../assets/img/locate.png'
  export default {
    props:{
      mapSize:{
        type:Object,
        default:{
          width: '800px',
          height: '300px'
        }
      },
      center:{
        type:Object,
        default:{
          lng: 116.404,
          lat: 39.915
        }
      }
    },
    components: {
      BaiduMap,
      BmControl,
      BmMarker
    },
    data: function () {
      return {
        dot:mapDot
      }
    },
    methods: {
      syncCenterAndZoom (e) {
        const {lng, lat} = e.target.getCenter()
        this.center.lng = lng;
        this.center.lat = lat;
        this.zoom = e.target.getZoom();
        this.$emit("getInfo",this.center)
      }
    }
  }
</script>
<style scoped>
  .map_box{
    padding-top:10px;
  }


  /*.detail_wrap .con li span img{*/
    /*width: 32px !important;*/
    /*height: 32px !important;*/
  /*}*/
  img{
    width: 32px !important;
    height: 32px !important;
  }
</style>
